<template>
  <div class="login">
    <div class="stars">
      <div v-for="(item,index) in starCount" :key="index" ref="star" class="star"></div>
    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      starCount: 800, //星星数量
      distance: 80
    };
  },
  mounted() {
    let _this = this;
    let starsArr = _this.$refs.star;
    starsArr.forEach(item => {
      let speed = 0.2 + Math.random() * 1;
      let thisDistance = _this.distance + Math.random() * 300;
      item.style.transformOrigin = `0 0 ${thisDistance}px`;
      item.style.transform = `translate3d(0,0,${thisDistance}px) rotateY(${Math.random() *
        360}deg) rotateX(${Math.random * -50}deg) scale(${speed},${speed})`;
    });
  }
};
</script>


<style lang="less" scoped>
.login {
  background: radial-gradient(200% 100% at bottom center, #dd7a61, #9198e5);
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@keyframes rotate {
  0% {
    transform: perspective(400) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }

  100% {
    transform: perspective(400) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}

.stars {
  transform: perspective(500px);
  transform-style: preserve-3d;
//   position: absolute;
  perspective: 50% 100%;
  background-color: aliceblue;
  left: 0;
  animation: rotate 90s infinite linear;
  width: 100%;
  height: 100%;
  top: 0;
  position: relative;
}

.star {
  width: 2px;
  height: 2px;
  background-color: aqua;
  position: absolute;
  backface-visibility: hidden;
  top: 0;
  left: 0;
}
</style>